
	function createPermissionPanel(region){

		  var groupGridView = new Ext.grid.GridView();
		  var groupSelModel = new Ext.grid.CheckboxSelectionModel();		
		  var groupFields = ['','id','groupName'];	
		  var groupStore=CRM.commons.createStore('groupStoreid', groupFields, 'permission/groupList');
		  var groupColModel = new Ext.grid.ColumnModel(
				  [
				   //groupSelModel,
				   {
				    header 		: 'Id',
				    dataIndex 	: 'id',
				    align		: 'center',
				    hidden		: true,
				    width 		: 80
				   }, 
				   {
				    header 		: 'Group Name',
				    sortable 	: true,
				    dataIndex 	: 'groupName',
				    width 		: 250
				   },
				   {
			  		xtype		: 'actioncolumn',
			  		header  	: '',
			  		id          : 'actionColumn',
			  		width		: 30,
			  		items		:[{
			  					   icon	: '../images/cross.gif'
			  		     	      }]
			  		}	
				 ]);

		  var groupGrid = new Ext.grid.GridPanel({
		    id 			: 'groupGrid',
		    title		: 'Groups',
		    width 		: 285,
		    height		: 500,
		    store 		: groupStore,
		    view 		: groupGridView,
		    colModel 	: groupColModel,
		    selModel 	: groupSelModel,
		    stripeRows 	: true,
		    enableRowBody:true,
		    autoScroll 	: true,
		    listeners	: {rowclick : function(){
		    					reloadRoleList(true);
		    				}
		    			  },
		    tbar        : {
				            xtype       : 'toolbar',
				            buttonAlign : 'left',
				            items       : [
				                            {xtype : 'displayfield', value : 'Group Name:', width : 70},
				                            {
				                            	xtype 			: 'textfield', 
				                            	id 				: 'groupNameTF', 
				                            	width 			: 160
				                            },
				                            '-',
				                            {
				                            	xtype	: 'button',
				                            	text	: 'Add',
				                            	handler	: createGroup
				                            },
				                            '-'
										   ]
			   			  }
		    /* ,
		    bbar        : {
				            xtype       : 'toolbar',
				            buttonAlign : 'right',
				            items       : [
				                           	'-',
				                            {
				                            	xtype	: 'button',
				                            	text	: 'Refresh',
				                            	handler : reloadGroupList	
				                            },
				                            '-',
										   ]
		    			  }
		   */ 			  
		  });
		  
	  	  
	  var roleGridView = new Ext.grid.GridView();
	  var roleSelModel = new Ext.grid.RowSelectionModel();		
	  var checkRoleColumn = new Ext.grid.CheckColumn({
	       header	: '',
	       dataIndex: 'assigned',
	       align	: 'center',
	       width	: 20
	    });
	  var roleFields = ['assigned','id','roleName'];	
	  var roleStore=CRM.commons.createStore('roleStoreid', roleFields, 'permission/roleListByGroup');
	  var roleColModel = new Ext.grid.ColumnModel(
			  [
			   checkRoleColumn,
			   {
			    header 		: 'Id',
			    dataIndex 	: 'id',
			    align		: 'center',
			    hidden		: true,
			    width 		: 30
			   }, 
			   {
			    header 		: 'Role Name',
			    sortable 	: true,
			    dataIndex 	: 'roleName',
			    width 		: 250
			   },
			   {
		  		xtype		: 'actioncolumn',
		  		header  	: '',
		  		id          : 'actionColumn',
		  		width		: 30,
		  		items		:[{
		  					   icon	: '../images/cross.gif'
		  		     	      }]
		  		}		 
			 ]);
	  var roleGrid = new Ext.grid.GridPanel({
	    id 			: 'roleGrid',
	    title		: 'Roles',
	    width 		: 305,
	    height		: 500,
	    store 		: roleStore,
	    view 		: roleGridView,
	    colModel 	: roleColModel,
	    selModel 	: roleSelModel,
	    stripeRows 	: true,
	    enableRowBody:true,
	    autoScroll 	: true,
	    //plugins		: [editor],
	    listeners	: {rowclick : function(){
	    					showResources();
	    				}
	    			  },
	    tbar        : {
			            xtype       : 'toolbar',
			            buttonAlign : 'left',
			            items       : [
			                            {xtype : 'displayfield', value : 'Role Name:', width : 60},
			                            {
			                            	xtype 		: 'textfield',
			                            	id 			: 'roleNameTF',
			                            	width 		: 190,
			                            	enableKeyEvents	: true,
	                       					listeners		: {keyup: function(){
			               											//reloadRoleList(false); 
			               										 }
	                       									   }	
			                            },
			                            '-',
			                            {
			                            	xtype	: 'button',
			                            	text	: 'Add',
			                            	handler	: createRole
			                            },
			                            '-'
									   ]
		   			  },
	    bbar        : {
			            xtype       : 'toolbar',
			            buttonAlign : 'right',
			            items       : [
			                           	'-',
			                            {
			                            	xtype	: 'button',
			                            	text	: 'Show All',
			                            	handler : function(){
			                            				reloadRoleList(false);
			                            			  }	
			                            },
			                            '-',
			                            {
			                            	xtype	: 'button',
			                            	text	: 'Apply',
			                            	handler : roleAssign	
			                            },
			                            '-',
									   ]
	    			  }
	  });
	  
	  
	  var resourceFields = ['id', 'resourceName', 'create', 'read', 'update', 'remove'];
	  var resourceStore = new Ext.data.JsonStore({
	    fields 		: resourceFields,
	    proxy 		: new Ext.data.HttpProxy({
	    				method : 'GET',
	    				url : 'permission/resourceListByRole'
	    				}),
	    root 		: 'data',
	    id 			: 'resourceStore',
	    autoLoad 	: true,
	    remoteSort 	: false
	  });
	  
	  var createColumn = new Ext.grid.CheckColumn({
	       header	: 'Create',
	       dataIndex: 'create',
	       align	: 'center',
	       width	: 55
	    });
	  
	  var readColumn = new Ext.grid.CheckColumn({
	       header	: 'Read',
	       dataIndex: 'read',
	       align	: 'center',
	       width	: 55
	  });
	  
	  var updateColumn = new Ext.grid.CheckColumn({
	       header	: 'Update',
	       dataIndex: 'update',
	       align	: 'center',
	       width	: 55
	    });
	  
	  var removeColumn = new Ext.grid.CheckColumn({
	       header	: 'Remove',
	       dataIndex: 'remove',
	       align	: 'center',
	       width	: 55
	    }); 

	  var resourceColModel = new Ext.grid.ColumnModel([ 
		  {
		    header 		: 'Id',
		    dataIndex 	: 'id',
		    align		: 'center',
		    width 		: 80,
		    hidden		: true
		  }, 
		  {
		    header 		: 'Resource Name',
		    sortable 	: true,
		    dataIndex 	: 'resourceName',
		    width 		: 250
		  },
		  createColumn,
		  readColumn,
		  updateColumn,
		  removeColumn
	  ]);

	  var resourceGridView = new Ext.grid.GridView();
	  var resourceSelModel = new Ext.grid.RowSelectionModel({
	    singleSelect : true
	  });
	  var resourceGrid = new Ext.grid.GridPanel({
	    id 			: 'resourceGrid',
	    title		: 'Access',
	    width 		: 480,
	    height		: 500,
	    store 		: resourceStore,
	    view 		: resourceGridView,
	    colModel 	: resourceColModel,
	    selModel 	: resourceSelModel,
	    stripeRows 	: true,
	    enableRowBody:true,
	    autoScroll 	: true,
	    border		: true,
	    bbar        : {
			            xtype       : 'toolbar',
			            buttonAlign : 'right',
			            items       : [
			                           '-',
			                           {
			                            	xtype	: 'button',
			                            	text	: 'Apply',
			                            	handler : function(sm, rowIndex, colIndex){
			                            				updateResourceDetails(sm, rowIndex, colIndex);
			                            			  }
			                            },
			                           '-'
									   ]
	    			  }
	  });
	  
	var permissionRootPanel = {
		xtype	: 'panel',
		id		: 'permissionRootPanel',
		//title	: 'Permissions',
		height	: '100%',	
		width	: '100%',
		frame	: true,
		region	: region,
		layout	: 'hbox',
		bodyStyle: {padding : '0px'},
		border	: true,
		items	: [
		     	    groupGrid,
		     	    {xtype : 'displayfield', width: 2},
		     	   	roleGrid,
		     	    {xtype : 'displayfield', width: 2},
 		     		resourceGrid
		     	  ]
		};
		return permissionRootPanel;
	}

	function showResources(){
		var record = Ext.getCmp('roleGrid').getSelectionModel().getSelected();
		var selectedRoleId = record.get('id');
		var resourceGrd = Ext.getCmp('resourceGrid');
		resourceGrd.store.removeAll();
		resourceGrd.store.reload({
	    			params: {
	    						roleId: selectedRoleId
	    					}
	    		});
	};
	
	function createRole(){
		var selectedRoleName = Ext.getCmp('roleNameTF').getValue();
		Ext.Ajax.request({
			method	: 'POST',
			url		: 'permission/createRole?roleName='+selectedRoleName,
			success	: function(){
							Ext.Msg.alert('Message','Role Created Successfully!');
							reloadRoleList();
						},
			failure	: function(){
							Ext.Msg.alert('Failure','Failure');
						}
		});
	};
	
	function createGroup(){
		var selectedGroupName = Ext.getCmp('groupNameTF').getValue();
		Ext.Ajax.request({
			method	: 'POST',
			url		: 'permission/createGroup?groupName='+selectedGroupName,
			success	: function(){
							Ext.Msg.alert('Message','Group Created Successfully!');
							reloadGroupList();
						},
			failure	: function(){
							Ext.Msg.alert('Failure','Failure');
						}
		});
	}	
	
	function roleAssign(){
		
		var groupRecord = Ext.getCmp('groupGrid').getSelectionModel().getSelected();
		var selectedGroupId = groupRecord.get('id');
		var roleStore = Ext.getCmp('roleGrid').store;

		var roleIdArray = '';
		for(var a=0; a<roleStore.getCount(); a++){
			var record = roleStore.getAt(a);
			var roleId = record.get('id');
			var roleName = record.get('roleName');
			var assigned = record.get('assigned');
			if(roleIdArray == ''){
				roleIdArray = roleId;
			}
			if(roleIdArray != ''){
				if(assigned == true){
					roleIdArray = roleIdArray+","+roleId;
				}
			}
		}
		//alert(roleIdArray);
		
		Ext.Ajax.request({
			method	: 'POST',
			waitMsg : 'Processing...',
			url		: 'permission/assignRole?groupId='+selectedGroupId+'&roleId='+roleIdArray,
			success	: function(){
							Ext.Msg.alert('Message','Role assigned Successfully!');
							reloadRoleList();
						},
			failure	: function(){
							Ext.Msg.alert('Failure','Failure');
						}
		});
		roleStore.commitChanges();
	};
	
	function updateResourceDetails(){
		
		var resourceStore = Ext.getCmp('resourceGrid').store;
		for(var a=0; a<resourceStore.getCount(); a++){
			var record = resourceStore.getAt(a);
			var resourceDetailsId = record.get('id');
			var resourceName = record.get('resourceName');
			var vCreate = record.get('create');
			var vRead = record.get('read');
			var vUpdate = record.get('update');
			var vRemove = record.get('remove');
			//alert(resourceDetailsId+", "+resourceName+", "+vCreate);
			Ext.Ajax.request({
				method  : 'POST',
		        url     : 'permission/save?resourceDetailsId='+resourceDetailsId+'&create='+vCreate+'&read='+vRead+'&update='+vUpdate+'&remove='+vRemove,
		      	success : function(){
		      					Ext.Msg.alert('Message','Permission Update Successfully.');
		            		},
		        failure :function(){ 
		                		Ext.Msg.alert('Failure','Failure');
	               			}
			});
		}
	};	
	
	
	function reloadRoleList(onlyAssigned){
		var record = Ext.getCmp('groupGrid').getSelectionModel().getSelected();
		var selectedGroupId = record.get('id');
		var roleName = Ext.getCmp('roleNameTF').getValue();
		//
		var roleGrd = Ext.getCmp('roleGrid');
		roleGrd.store.removeAll();
		roleGrd.store.reload({
							  params : {
								  		groupId 	: selectedGroupId,
								  		onlyAssigned: onlyAssigned
								  		}
							});
		Ext.getCmp('resourceGrid').store.removeAll();
	};
	
	function reloadGroupList(){
		var groupGrd = Ext.getCmp('groupGrid');
		groupGrd.store.removeAll();
		groupGrd.store.reload();
	};








